<template>
	<view class="search-result">
		<view class="sr-header">
			<view class="serach-input input2">
				<view class="input-box box2">
					<text class="iconfont search">&#xe62e;</text>
					<text @click="onCuowu()" class="iconfont error">&#xe618;</text>
					<input type="text" v-model="searchText" placeholder="猫粮" placeholder-class="place-input" @confirm="searchStart()" />
					<button type="primary" @click="onSearch(1)">搜索</button>
				</view>
			</view>

			<view class="sr-sort">
				<view :class="['sort-item',sortId == 1 ? 'item-active' : '']" @click="onSearch(1)">
					综合
				</view>
				<view :class="['sort-item',sortId == 2 ? 'item-active' : '']" @click="onSearch(2)">
					距离
				</view>
				<view :class="['sort-item',sortId == 3 ? 'item-active' : '']" @click="onSearch(3)">
					销量
				</view>
				<view :class="['sort-item',sortId == 4 ? 'item-active' : '']" @click="onSearch(4)">
					价格
				</view>
				<view :class="['sort-item','last',sortId == 5  ? 'item-active' : '',sortId == 6  ? 'item-active' : '']" id="5" @click="onMethods(5)">
					{{methodsText}}<text class="iconfont">&#xe627;</text>
				</view>
			</view>
			<view class="popup-after left22" v-if="popupFlag" style="background: url('/static/imgs/index/background.png') no-repeat; background-size: contain;">
				<view class="line mt" @click="onMethods_item(5)">
					自提
				</view>
				<view class="b"></view>
				<view class="line" @click="onMethods_item(6)">
					配送
				</view>
			</view>
			<view class="mask" v-show="popupFlag" @click="onMask" @touchmove="onMask"></view>
		</view>
		
		<view class="qsy" v-if="!datas.length">
			没有搜索到该商品，请搜索其它商品吧~~
		</view>
		<!-- 内容部分 -->
		<view class="goods-box margintop150" v-else>
				
				<view class="goods-item" v-for="(goods,index) in datas" :key="index">
					<image :src="goods.product_proimgs" @click="navTo(goods.product_id)" mode="aspectFill" class="item-img"></image>
					<view class="item-title">
						{{goods.product_name}}
					</view>
					<view class="item-msg">
						<text class="price-1">￥ <text class="price-1-1">{{goods.product_nowprice}}</text></text>
						<text class="price-2">￥{{goods.product_preprice * 1}}</text>
						<text class="msg-3">仅剩{{goods.product_pronums}}</text>
						<text class="msg-4" @click="qg(goods.product_id)">抢购</text>
					</view>

					<view class="item-position">
						<view class="left">
							<image :src="goods.shop_shavatar" mode="aspectFill" class="user-icon"></image>
							<text class="position-1">{{goods.shop_name}}</text>
						</view>
						<view class="right">
							<image src="/static/imgs/people.png" mode="aspectFill" class="person-icon"></image>
							<text class="position-3">{{goods.distance}}米</text>
						</view>
					</view>

					<view class="item-footer">
						<view class="footer-l">
							<block v-for="(img,sub) in goods.order_user_shavatar" :key="sub">
								<image :src="img.shavatar" mode="aspectFill" class="f-image-1"></image>
							</block>
						</view>
						<view class="footer-r">
							等邻居都在抢
						</view>
					</view>

				</view>

			

			
			
			<!-- <view class="goods-item">
				<image src="/static/imgs/image1.png" mode="aspectFill" class="item-img"></image>
				<view class="item-title">
					9.9元全场包邮新鲜水地方三方
				</view>
				<view class="item-msg">
					<text class="price-1">￥ <text class="price-1-1">9</text> .9</text>
					<text class="price-2">￥15.8</text>
					<text class="msg-3">仅剩88</text>
					<text class="msg-4">抢购</text>
				</view>

				<view class="item-position">
					<view class="left">
						<image src="/static/imgs/business-avatar1.png" mode="aspectFill" class="user-icon"></image>
						<text class="position-1">海雅名品汇</text>
					</view>
					<view class="right">
						<image src="/static/imgs/people.png" mode="aspectFill" class="person-icon"></image>
						<text class="position-3">500米</text>
					</view>
				</view>

				<view class="item-footer">
					<view class="footer-l">
						<image src="/static/imgs/profile-picture1.png" mode="" class="f-image-1"></image>
						<image src="/static/imgs/profile-picture2.png" mode="" class="f-image-2"></image>
						<image src="/static/imgs/profile-picture3.png" mode="" class="f-image-3"></image>
					</view>
					<view class="footer-r">
						等邻居都在抢
					</view>
				</view>

			</view>
 -->

		</view>
		
		

	</view>
</template>

<script>
	import { mapState,mapMutations } from "vuex";
	export default {
		
		onLoad(option) {
			let token = uni.getStorageSync('lph-token');
			if(token) {
					this.isLogin = true;
			}
			this.LL = uni.getStorageSync('lph-ll');
			this.searchText = option.searchText;
			this.onSearch(this.sortId);
			
		},
		
		data() {
			return {
				searchText: '',
				sortId: 1,
				popupFlag: false,
				methodsText: '配送方式',
				LL: {}, // 经纬度
				datas: [], // 数据
				isLogin:false, // 是否登录
			};
		},
		// onBackPress(e) {
		// 	uni.navigateBack({
		// 		delta: 2
		// 	})
		// },
		
		methods: {
			...mapMutations(['changeSList']),
			navTo(proid) { // 到详情页
				uni.navigateTo({
					url:`/pages/detail/detail?proid=${proid}`
				})
			},
			qg(proid) { //到确认订单
				uni.navigateTo({
					url:`/pages/discountMall/finishOrder?pro_id=${proid}&quantity=1`
				})
			},
			async onSearch(sortid) {
				this.sortId = sortid;
				// this.methodsText = '配送方式'
				let send = {
					proname: this.searchText,
					lng: this.LL.long,
					lat: this.LL.lat,
					sortType: sortid,
				}
				let result = await this.$http.HomeSearch(send);
				this.datas = result.data;
				setTimeout(() => {
					if(isLogin) {
						this.$http.getSearchHistory().then((a) => {
							this.changeSList(a.data);
						})
					}
					
					
				}, 1000);

			},
			
	
			onCuowu() { // 点x 
				this.searchText = '';
			},
			onSort(e) { // 分类切换
				this.sortId = e.target.id;
				this.methodsText = '配送方式'
			},
			onMethods(sortid) { // 点击配送方式
				this.popupFlag = !this.popupFlag
				this.sortId = sortid
			},
			onMethods_item(sortid) { //配送方式选择
				this.popupFlag = false;
				
				switch (sortid) {
					case 5:
						this.methodsText = '自提';
						this.onSearch(sortid);
						break;
					case 6:
						this.methodsText = '配送';
						this.onSearch(sortid);
						break;
					default:
						break;
				}
			},
			onMask() {
				this.popupFlag = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/doenCommon.scss';
	@import 'static/css/index.scss';
</style>
